<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="hello" />
  <SetUp />
  <div :data-theme="theme">
    <button @click="changeTheme" class="theme">主题切换</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import SetUp from "./components/SetUp.vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
    SetUp
  },
  setup() {
    let theme = ref<string>("bright");
    const changeTheme = () => {
      if (theme.value === "bright") {
        theme.value = "dark";
      } else {
        theme.value = "bright";
      }
    };
    return {
      theme,
      changeTheme
    };
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<style lang="styl"></style>
